<template>
	<view class="indexBox">
		<view class="itemBox" v-if="itemlist.length > 0">
			<view class="item" v-for="(item, index) in itemlist" :key="index">
				<text>{{ item.title }}</text>
				<view class="icon">
					<text class="iconfontPT iconzaixianjianli" @click="edit(item)"></text>
					<text class="iconfontPT iconshanchu11" @click="del(item)"></text>
				</view>
			</view>
		</view>
		<view v-else><noData texts="您还没添加优惠券哦"></noData></view>
		<view class="add" @click="add"><text>添加分类</text></view>
		<view class="dialog" v-if="status">
			<view class="dialogBox">
				<view class="title">{{ dialogtitle }}</view>
				<view class="content"><input type="text" v-model="title" placeholder="请填写分类名称" /></view>
				<view class="bottom">
					<text @click="qx">取消</text>
					<text @click="addsrue">确定</text>
				</view>
			</view>
		</view>

		<view class="dialog" v-if="delstatus">
			<view class="deldialogBox">
				<view class="deltitle">提示</view>
				<view class="delcontent">你确定要删除吗?</view>
				<view class="delbuttonBox">
					<text @click="canle">取消</text>
					<text @click="delsure">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getGoodsClass, addGoodsClass, delGoodsClass, editGoodsClass } from '../../../apis/shop/api.js';
import noData from '../../components/public/no-data.vue';
export default {
	data() {
		return {
			itemlist: [],
			title: '',
			status: false,
			dialogtitle: '添加分类',
			store_id: '',
			token: '',
			id: '',
			delstatus: false
		};
	},
	onLoad() {
		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');
		this.getList();
	},
	methods: {
		getList() {
			let that = this;
			getGoodsClass({
				store_id: that.store_id,
				token: that.token
			}).then(res => {
				console.log(res);
				that.itemlist = res.data.goodsClass;
			});
		},
		delsure() {
			let that = this;
			delGoodsClass({
				store_id: that.store_id,
				id: that.id,
				token: that.token
			}).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '删除成功'
					});
					this.getList();
					this.delstatus = false;
				} else {
					uni.showToast({
						title: res.msg
					});
				}
			});
		},
		addsrue() {
			let that = this;
			if (that.title != '') {
				if (that.dialogtitle == '添加分类')
					addGoodsClass({
						title: that.title,
						store_id: that.store_id,
						token: that.token
					}).then(res => {
						if (res.code == 1) {
							that.title = '';
							that.status = false;
							uni.showToast({
								title: '添加成功'
							});
							that.getList();
						} else {
							uni.showToast({
								title: res.msg
							});
						}
					});
				else if (that.dialogtitle == '编辑分类') {
					editGoodsClass({
						title: that.title,
						store_id: that.store_id,
						token: that.token,
						id: that.id
					}).then(res => {
						if (res.code == 1) {
							that.status = false;
							uni.showToast({
								title: '修改成功'
							});
							that.getList();
						} else {
							uni.showToast({
								title: res.msg
							});
						}
					});
				}
			} else {
				uni.showToast({
					title: '分类名称不能为空'
				});
			}
		},
		canle() {
			this.delstatus = false;
		},
		qx() {
			let that = this;
			this.status = false;
		},
		add() {
			this.dialogtitle = '添加分类';
			this.status = true;
		},
		del(item) {
			this.id = item.id;
			this.delstatus = true;
		},
		edit(item) {
			this.dialogtitle = '编辑分类';
			this.status = true;
			this.title = item.title;
			this.id = item.id;
		}
	}
};
</script>

<style lang="less">
.indexBox {
	padding: 0 30rpx 30rpx;

	.itemBox {
		padding-bottom: 170rpx;
	}
	.item {
		line-height: 88rpx;
		font-size: 28rpx;
		color: #333;

		& + .item {
			border-top: 1px solid #c7bebe;
		}

		&::after {
			content: '';
			display: block;
			height: 0;
			overflow: hidden;
			clear: both;
		}

		.icon {
			float: right;

			text {
				&:nth-child(1) {
					float: left;
					margin-right: 40rpx;
				}

				&:nth-child(2) {
					float: right;
				}
			}
		}
	}
}

.dialog {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.45);
	.deldialogBox {
		width: 654rpx;
		height: 284rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		text-align: center;
		border-radius: 20rpx;
		.deltitle {
			line-height: 68rpx;
			font-size: 30rpx;
			color: #333333;
		}
		.delcontent {
			font-size: 30rpx;
			padding: 40rpx 0;
			border-bottom: 1rpx solid #cac9c9;
		}
		.delbuttonBox {
			display: flex;
			text {
				flex: 1;
				color: #333333;
				font-size: 30rpx;
				line-height: 89rpx;
				&:nth-child(1) {
					border-right: 1rpx solid #cac9c9;
				}
				&:nth-child(2) {
					color: #e41805;
				}
			}
		}
	}
	.dialogBox {
		position: absolute;
		width: 654rpx;
		height: 310rpx;
		background-color: #fff;
		border-radius: 15rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.title {
			text-align: center;
			line-height: 106rpx;
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}

		.content {
			padding: 0 48rpx;

			input {
				width: 100%;
				height: 72rpx;
				border: 1rpx solid #ccc;
				color: #999;
				font-size: 30rpx;
				text-align: center;
			}
		}

		.bottom {
			margin-top: 40rpx;
			border-top: 1rpx solid rgba(205,205,205, .5);
			display: flex;

			text {
				flex: 1;
				text-align: center;
				line-height: 88rpx;
				font-size: 30rpx;

				&:last-child {
					color: #e31805;
					border-left: 0.5rpx solid rgba(205,205,205, .5);
				}
			}
		}
	}
}

.add {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30rpx;
	box-shadow: -1rpx -2rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
	background-color: #fff;
	
	text {
		display: block;
		padding: 20rpx 0;
		background-color: #e41805;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
	}
}
</style>
